<template>
  <div>
    <el-row type="flex" align="top" justify="end">
      <el-col :span="3">
        <el-button id="button-export" @click="downloadSheet">
          导出销量榜单
        </el-button>
      </el-col>
    </el-row>
    <div class="all">
      <div ref="lineChart" class="lineChart"></div>
      <div ref="histogram" class="histogram"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts'

export default {
  name: "PerformanceView",
  data(){
    return{
      cntData: [],
      costData: []
    }
  },
  methods: {
    downloadSheet() {
      window.location.href = "/api/manage/performance/getVols"
    },
    initial(){
      let line = echarts.init(this.$refs.lineChart)
      line.setOption(this.getOption())
      let bar = echarts.init(this.$refs.histogram)
      bar.setOption(this.getOption2());
    },
    async fetchData(){
      //let fir,sec
      let res = await axios.get("/api/manage/performance/getDaily");
      res.data.forEach(item => {
        this.cntData.push([item.orderTime, item.cnt]);
        this.costData.push([item.orderTime, item.cost]);
      });
    },
    getOption() {
      return {
        title: {
          text: '业绩总览'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销售额','销售量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
        },

        yAxis : [{
          type: 'value',
          name:'销售额',
          min: 0,
          max: 10000,
        },
          {
            type: 'value',
            name:'销售量',
            min: 0,
            max: 200
          }],

        series: [
          {
            name: '销售额',
            type: 'line',
            data: this.costData
          },
          {
            name: '销售量',
            type: 'line',
            data: this.cntData,
            yAxisIndex: 1
          },

        ]
      }
    },
    getOption2() {
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销售额','销售量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'time',
        },
        yAxis: [
          {
            type: 'value',
            name:'销售额',
            min: 50,
            max: 250,
            interval: 50,
            splitNumber: 4,
          },
          {
            type: 'value',
            name:'销售量',
            min: 1000,
            max: 8000,
            interval: 1500,
            splitNumber: 6,
          }
        ],
        series: [
          {
            data: this.cntData,
            type: 'bar',
            name:"销售量",
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            yAxisIndex: 0
          },
          {
            data: this.costData,
            name:"销售额",
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            yAxisIndex: 1
          }
        ]
      }
    },
    refresh() {
      this.fetchData()
          .then(() => this.initial())
          .catch(e => {
            if (e.response) {
              this.$message({
                message: `未知的服务器错误 代码${e.response.status}`,
                type: "error"
              });
            } else {
              this.$message({
                message: `未知的错误`,
                type: "error"
              });
            }
          })
    }
  },
  mounted() {
    this.refresh();
  },
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .lineChart,.histogram{
    width: 900px;
    height: 500px;
  }
</style>